<template>
    <div class="goods">
        <el-row :gutter="4" style="margin:10px 0px">
            <el-col :span="5">
                <el-input placeholder="按商品编号搜索" v-model="orderNumber" class="input-with-select">
                    <el-button @click="search('num')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="按商品名称搜索" v-model="orderNumber" class="input-with-select">
                    <el-button @click="search('num')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="5" style="display: flex;align-items: center">
                <el-button type="primary" @click="search('num')" style="margin-right:5px;">清空刷新</el-button>
                <el-badge :value="catNumber" class="item">
                    <el-button type="primary" @click="goCat">购物车商品数量</el-button>
                </el-badge>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="saleData" style="width: 100%" border>
                <el-table-column prop="goodsNum" label="商品编号" align="center">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="goodsImg" label="图片" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsImg" alt="" width="50" height="50">
                    </template>
                </el-table-column>
                <el-table-column prop="specifications" label="商品详情" align="center">
                </el-table-column>
                <el-table-column prop="price" label="单价" align="center">
                </el-table-column>
                <el-table-column prop="goodsStock.storeNum" label="库存" align="center">
                </el-table-column>
                <el-table-column  label="选择区" align="center">
                     <el-table-column label="数量" align="center" width="200">
                         <template slot-scope="scope">
                             <el-input-number v-model="scope.row.number" @change="handleChange(scope.row)"  label="输入数量"></el-input-number>
                        </template>
                     </el-table-column>
                     <el-table-column prop="total" label="小计" align="center">
                     </el-table-column>
                     <el-table-column prop="" label="操作" align="center">
                         <template slot-scope="scope">
                            <span class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="addCat(scope.row)" size="mini">
                                加入购物车
                            </span>
                        </template>
                     </el-table-column>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 50, 100, 200]"
                :page-size="pageSize"
                layout="->, sizes, prev, pager, next, jumper, total"
                :total="totalElements"
            ></el-pagination>
        </el-row>
        <!-- <orderDetail :off.sync="orderDialog" :rowData="rowdata"></orderDetail> -->
    </div>
</template>


<script>
import { getPurchaseList } from "@/api/store/shopPurchase.js"
import * as util from "@/util/util.js"
export default {
    name: "saleDetail",
    components: {
        // "orderDetail": () => import("@/views/store/shopSale/orderDetail.vue")
    },
    data(){
        return {
            selectGoods: [],
            rowdata: {},
            orderDialog: false,
            status: "",
            orderNumber: "",
            orderStatus: [
                {label: "待收货", value: 0},
                {label: "配送中", value: 1},
                {label: "已确认收货", value: 2},
                {label: "用户拒收", value: 3},
                {label: "未付款", value: 4},
                {label: "用户取消", value: 5},
            ],
            selectDate: "",
            saleData: [],
            pageSize: 15,
            currentPage: 1,
            totalElements: 0,
            totalPages: 1,
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                }
            }]
            },
        }
    },
    computed: {
        storeId(){
            return JSON.parse(localStorage.getItem("user")).storeId;
        },
        catNumber(){
            return this.$store.state.cat.catGoods.length;
        },
        catGoods(){
            return this.$store.state.cat.catGoods;
        }
    },
    created(){
        this.getList();
    },
    methods: {
        goCat(){
            this.$router.push("/store/purchase/cars");
        },
        handleChange(row) {
            console.log(row);
            this.saleData.forEach((e) => {
                if(row.goodsId == e.goodsId){
                    e.total = row.number * e.price;
                }
            });
        },
        search(type){
            this.getList(type);
        },
        getList(type){
                let obj = {
                   storeId: this.storeId,
                   currentPage: this.currentPage,
                   pageSize: this.pageSize,
                };
                // if(type == "time"){
                //    var createdDate = util.timestampToTime(new Date(this.selectDate[0]));
                //    var updateDate = util.timestampToTime(new Date(this.selectDate[1]));
                //    obj = Object.assign({createDate: createdDate, updateDate: updateDate}, obj);
                // }else if(type == "num"){
                //    obj = Object.assign({goodsNum: this.goodsNumber}, obj);
                // }else if(type == "status"){
                //    obj = Object.assign({status: this.status}, obj);
                // }else if(type == "clear"){
                //     this.status = "";
                //     this.goodsName = "";
                //     this.goodsNumber = "";
                //     obj = Object.assign({}, obj);
                // }
                 getPurchaseList(obj).then(
                    res => {
                        console.log("res店铺采购列表接口", res);
                        this.saleData = res.data.list;
                        this.saleData.forEach((e) => {
                            // e.number = null;
                            // e.total = null;
                            this.$set(e,'number', null);
                            this.$set(e,'total', null);
                        });
                        // this.noticeData.forEach((e) => {
                        //     e.createDate = util.timestampToTime(e.createDate);
                        // });
                        this.totalElements = res.data.total;
                    },
                    err => {}
                );
            },
        //发货
        addCat(row){
            if(row.number == 0 || row.number == "undefined" || row.number == ""){
                this.$notify({
                    type: "warning",
                    message: "请先选择数量"
                });
                return;
            }
            if(this.catGoods.findIndex(e => e.goodsId == row.goodsId) != -1){
                this.$notify({
                    type: "warning",
                    message: "已经添加过购物车,请勿重新添加"
                });
                return;
            }else{
                this.$notify({
                    type: "success",
                    message: "添加购物车成功"
                });
            }
            this.$store.commit("add_cat", row);
        },
        orderDetail(row){
            console.log("row", row);
            this.rowdata = row;
            this.orderDialog = true;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList();
            console.log(`当前页: ${val}`);
        }
    }
}
</script>